<template>
  <div>
    <div class="d_heads clearfix">
      <div class="lunbo clearfix">
        <ul class="datu">
          <li :class="{show:((ind==0&&indexs==0?true:false)||indexs===ind)}" ref="ind" v-for="(val,ind) in p_img" :key="ind">
            <img :src="val" :alt="ind">
          </li>
        </ul>
        <div class="xiaotu_warp" :style="'left:'+sleft+'px;'">
          <div class="oup" @click="top">
            <i class="fa fa-chevron-up"></i>
          </div>
          <div class="odown" @click="bottom">
            <i class="fa fa-chevron-down"></i>
          </div>
          <ul class="xiaotu" :style="'top:'+stop+'px;'">
            <li :id="ind" v-for="(val,ind) in p_img" :key="ind">
              <img :src="val" :alt="ind">
              <div :class="{baifenbai:((ind==0&&indexs==0?true:false)||indexs===ind)}" @click="tab(ind)"></div>
            </li>
            <div></div>
          </ul>
        </div>
       
        <div class="xiangqing">
          <div class="good-name">{{p_suoyou.p_name}}</div>
          <p class="detailes">{{p_suoyou.p_detailes}}</p>
          <div class="card">
            <div class="prices">
              <span>售价</span>
              <i>￥</i>
              <b>{{p_suoyou.p_price}}</b>
            </div>
            <div class="server clearfix">
              <div class="server_inner1">
                <span>服务</span>
                <i class="fa fa-smile-o"></i>
              </div>
              <div class="server_inner2">
                <h6>
                  <i class="fa fa-check-square-o"></i>本产品为有品第三方商品
                </h6>
                <h6>
                  <i class="fa fa-check-square-o"></i>由深圳市第七天堂科技有限公司 发货并提供售后
                </h6>
                <h6>
                  <i class="fa fa-check-square-o"></i>支持7天无理由退货（请参考商品详情-常见问题）
                </h6>
              </div>
            </div>
          </div>
          <div class="style clearfix" v-for="(val,ind) in sstyle" :key="ind" >
              <!-- {{val}} -->
            <span>{{val.k_name}}</span>
            <ul class="clearfix">
                <!-- {{val.chid}} -->
             <li v-for="(val1,ind1) in val.chid" :key="ind1" @click="bianse($event,val.k_name,sstyle)">
                <!-- {{index1==ind1}} -->
                 {{val1}}
             </li>
            </ul>
          </div>
          <div class="number">
            <span>数量</span>
            <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
            <span class="kucun">库存</span>
            <i>{{p_suoyou.p_stock}}</i>
          </div>
          <div class="cart" v-if="!shoukong">
            <button class="buy" @click="buy">立即购买</button>
            <button class="add" @click="addcart">加入购物车</button>
          </div>
          <div v-if="shoukong" class="shoukong_warp">
            <button class="shoukong">已售罄</button>
          </div>
        </div>
      </div>
    </div>
    <div class="xiangxi">
      <el-tabs type="border-card">
        <el-tab-pane label="商品概述" class="gaishu">
          <ul>
            <li v-for="(val,ind) in summary" :key="ind">
              <img :src="val">
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="评论">
          <div v-if="!show" class="nocomment">
            <p>暂时还没有评论，快来购买吧！</p>
          </div>
           <div v-if="show">
             <div v-for="(val,ind) in comment" :key="ind" class="comment_warp" >
            <div class="toxiang">
                <img :src="val.pl_img"/><span>{{val.u_name}}</span>
            </div>
            <span class="data">{{val.datas}}</span>
            <p class="con">{{val.spl_conent}}</p>
        </div>
           </div>
           </el-tab-pane>
        <el-tab-pane label="常见问题" class="problem">
          <ul>
            <li v-for="(val,ind) in p_problem" :key="ind">
              <img :src="val">
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="检测报告">
          <li v-for="(val,ind) in p_report" :key="ind">
            <img :src="val">
          </li>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import {mapState,mapMutations,mapActions,mapGetters} from "vuex";
export default {
  inject:['reload'],
  data() {
    return {
      show:false,
      ligm:[],
      shoukong:false,
      productid: "",
      p_img: "",
      shows:true,
      d_class: false,
      f_class:true,
      x_class: true,
      y_class:false,
      color: "#ececec",
      sleft: "385",
      stop: "0",
      sstyle: [],
      num1: 1,
      p_suoyou: "",
      summary: "",
      p_problem: "",
      p_report: "",
      p_kuangshi:"",
      kuangshi:[],
      indexs:parseInt(0),
      bkys:false,
      fenge:[],
      lengths:false,
      cart:{
        company:"",
        img:"",
        name:"",
        style:[],
        price:"",
        num:"",
      },
      sty:{},
      comment:[],
      pro:"",
      hhstyle:[]

    };
  },
  created() {
     this.$axios.post("http://127.0.0.1:8081/client/productid", {
        p_id: this.$route.query.productid
      })
      .then(res => {
        
        console.log("ress",res.data.val);
        // this.p_img = res.data.val[1];
        this.p_img=res.data.val[0].p_imgs.split(",");
        // console.log("测试",this.cs_img)
        this.p_problem=res.data.val[0].p_problem.split(",");
        this.p_suoyou = res.data.val[0];
        // this.sstyle = res.data.val[2];
        // console.log("ooooooo",res.data.val[2]);
        this.summary = res.data.val[0].p_summary.split(",");
        // this.p_problem = res.data.val[3];
        this.p_report =res.data.val[0].p_report.split(",");
        // this.p_kuangshi=res.data.val[6];
        if(res.data.val[0].p_style=="")
        {
          this.sstyle=[]
        }
        else{
        this.pro=res.data.val[0].p_style.split(";");
        console.log("proooo",this.pro)
                for(let i=0;i<this.pro.length;i++)
                {
                    this.sstyle.push({k_name:this.pro[i].split(":")[0],chid:this.pro[i].split(":")[1].split(",")})
                }
        }
        if(this.p_suoyou.p_stock<=0)
        {
           this.p_suoyou.p_stock=0;
          this.shoukong=true;
        }
        else{
          this.shoukong=false;
        }
//         if(this.sstyle.length==0)
//         {
//             this.sstyle=[];
//             if(this.p_kuangshi.length==0)
//             {
//               this.p_kuangshi=[]
//             }
//         }
//        else{
//           for(let i=0;i<this.sstyle.length;i++)
//         {
//             console.log(this.sstyle[i].k_id)
//             this.sstyle[i].chid=[];
//           for(let j=0;j<this.p_kuangshi.length;j++)
//           {
//               if(this.sstyle[i].k_id==this.p_kuangshi[j].k_id)
//               {
//                   console.log(this.sstyle[i].k_id,this.p_kuangshi[j].k_id)
//                   this.sstyle[i].chid.push(this.p_kuangshi[j].s_name);
//               }
//           }
//         }
// //  console.log("styles",this.sstyle)
//        }
       
        // console.log("kuangshi",this.p_kuangshi)
        // console.log(res.data);
        // console.log("suoyou",this.p_suoyou)
        // document.getElementsByClassName("xiaotu")[0].childNodes[0].className="show";
      });
      this.$axios.post("http://127.0.0.1:8081/client/comment",{
        p_id:this.$route.query.productid
    }).then(res=>
    {
      console.log("result",res.data)
      if(res.data.status==0)
      {
        this.show=false;
      }
      else{
        this.show=true;
        for(let i=0;i<res.data.result.length;i++){
          res.data.result[i].datas=this.datas(parseInt(res.data.result[i].datas));
            if(res.data.result[i].pl_sex==1)
            {
                res.data.result[i].pl_img="http://127.0.0.1:8081/upload/timg.jpg";
            }
            else{
                res.data.result[i].pl_img="http://127.0.0.1:8081/upload/timg (1).jpg";
            }
        }
        this.comment=res.data.result;
          console.log("comment",this.comment);
      }
        
    })
  },
  mounted() {
   
  },
  computed: {
    ...mapState(["num"])
  },
  methods: {
    datas(time)
    {
      // console.log(time)
      var date = new Date(parseInt(time) + 8 * 3600 * 1000); // 增加8小时
      // console.log(date.toJSON())
    return date.toJSON().substr(0, 10).replace('T', ' ');
    },

    top() {
      if (this.stop == 0) {
        console.log(this.stop);
      } else {
        let i = 0;
        let timer = setInterval(() => {
          this.stop = parseInt(this.stop) + 1;
          i++;
          if (i == 109) {
            clearInterval(timer);
          }
        }, 5);
      }
    },

    bottom() {
      if (this.stop <= -(this.$refs.ind.length - 4) * 109) {
        console.log(this.stop);
      } else {
        let i = 0;
        let timer = setInterval(() => {
          this.stop = parseInt(this.stop) - 1;
          i++;
          if (i == 109) {
            clearInterval(timer);
          }
        }, 5);
        console.log(this.stop);
      }
    },

    tab(ind) {
      console.log(ind)
      this.indexs=ind;
    },

    buy()
    {
      if(this.sstyle.length==0)
      {
        this.lengths=true;
        this.sty="";
      }
      if(this.lengths)
      {
        if(sessionStorage.getItem("username"))
          {

              this.ligm=[{
        name:this.p_suoyou.p_company,
        list:[{p_id:this.p_suoyou.p_id,
        u_id:sessionStorage.getItem("userid"),
        c_img:this.p_suoyou.p_img,
        c_name:this.p_suoyou.p_name,
        c_num:this.num1,
        c_price:this.p_suoyou.p_price,
        c_style:this.sty,
        c_total:this.num1*this.p_suoyou.p_price,
        checked:true,
        c_company:this.p_suoyou.p_company
        }],
        checked:true,
        random: Math.floor(Math.random()*1000),
        status: 0
      }];
      localStorage.dingdan=JSON.stringify(this.ligm);
      localStorage.total=this.num1*this.p_suoyou.p_price;
      localStorage.removeItem("c_id");
       this.$router.push({path:"/settlement",query:{
          uid:sessionStorage.getItem("userid")
        }});
          }
          else{
     this.$confirm('您还未登录, 是否进入登录界面?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push("/login")
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      }
      }
      else{
  this.$message({
            type: 'info',
            message: '请把样式选择全'
          });  
}
      

      },

    handleChange(value) {
      console.log(value);
    },

    bianse(e,name,num)
    {
      if(this.sstyle.length==0)
      {
        this.lengths=true
      }
      else{
   console.log(num.length)
  this.sty[name]=e.target.innerHTML.trim();
  console.log(this.sty)
     let oul= e.path[1].children
      for(let i=0;i<oul.length;i++)
      {
        oul[i].className=""
      }
  e.path[0].className="brcolor";
  var arr= Object.keys(this.sty).length; 
  if(arr==num.length)
  {
    this.lengths=true
  }
  else{
    this.lengths=false;
  }

      }
   
     
    },

    ...mapActions(["cartnum","carts"]),
    addcart()
{
 
  if(this.sstyle.length==0)
      {
        this.lengths=true;
        this.sty="";
      }
  // if(JSON.stringify(this.sty).length==2)
  // {
  //   console.log("jjj")
  // }
if(this.lengths)
{ 
   
  // let m={
  //   company:this.p_suoyou.p_company,
  //   img:this.p_suoyou.p_img,
  //   name:this.p_suoyou.p_name,
  //   style:this.sty,
  //   price:this.p_suoyou.p_price,
  //   num:this.num1,
  //   uid:sessionStorage.getItem("userid"),
  //   pid:this.p_suoyou.p_id,
  //   total:this.num1*this.p_suoyou.p_price
  // }
  // console.log(m)
  if(sessionStorage.getItem("username"))
{
 
 this.$axios.post("http://127.0.0.1:8081/client/addcart",
  {company:this.p_suoyou.p_company,
    img:this.p_suoyou.p_img,
    name:this.p_suoyou.p_name,
    style:this.sty,
    price:this.p_suoyou.p_price,
    num:this.num1,
    uid:sessionStorage.getItem("userid"),
    pid:this.p_suoyou.p_id,
    total:this.num1*this.p_suoyou.p_price,
    uname:sessionStorage.getItem("username")
  }
  ).then(res=>
  {
    if(res.data.status==1)
    {
      if(this.num>=120)
      {
         this.$message.error('购物车商品数量达到上限值');
      }
      else{
        this.$message({
          message: '添加购物车成功',
          type: 'success'
        });
        // this.reload();
      this.carts(this.num1);
      }
    }
    else{
       this.$message.error('添加购物车失败');
    }
  })
}
else{
     this.$confirm('您还未登录, 是否进入登录界面?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push("/login")
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      }
}
else{
  this.$message({
            type: 'info',
            message: '请把样式选择全'
          });  
}
 
}
}};
</script>

<style scoped>
.d_heads {
  width: 1080px;
  margin: 30px auto;
}
/* .d_heads .lunbo{ */
/* width: 400px;
    } */
.datu {
  width: 366px;
  float: left;
  height: 431px;
  background-color: #f4f4f4;
  border: 1px solid #ececec;
  margin-right: 20px;
  /* overflow: hidden; */
}
.datu li{
    display: none;
}
/* .lunbo::after{
        content: "";
        clear: both;
        height: 0;
        overflow: hidden;
        display: block
    } */
.clearfix::after {
  content: "";
  clear: both;
  height: 0;
  overflow: hidden;
  display: block;
}
.lunbo {
  position: relative;
}
.xiaotu_warp {
  width: 84px;
  height: 433px;
  overflow: hidden;
  position: absolute;
  /* float:left; */
}
.xiaotu {
  width: 83px;
  /* float:left; */
  position: absolute;
  /* left:385px; */
  /* top:0; */
}
.datu img,.xiaotu img {
  width: 100%;
  height: 100%;
  display: block;
}
.xiaotu li {
  position: relative;
  margin-bottom: 11px;
  background-color: #f4f4f4;
  border: 1px solid #ececec;
  box-sizing: border-box;
  height: 98px;
}
.xiaotu li div{
      background: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.style ul .brcolor{
  border: 1px solid #845f3f;
}
/* .aptiy {
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
} */
/* .hidd {
  display: none;
} */
.datu .show {
  display: block;
  height: 100%
}
.data .show img{
  /* width: 100%; */
  height: 100%;
}
.xiaotu .baifenbai {
  background: rgba(255, 255, 255, 0);
  border: 1px solid #000;
}
.oup,
.odown {
  position: absolute;
  z-index: 999;
  /* left:34px; */
  background: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 20px;
  text-align: center;
  line-height: 20px;
  display: none;
  left: 2px;
}
.xiaotu_warp:hover .oup,
.xiaotu_warp:hover .odown {
  display: block;
}
.oup i,
.odown i {
  color: #fff;
}
.oup {
  top: 2px;
}
.odown {
  bottom: 8px;
}
.xiangqing {
  width: 560px;
  /* position: absolute; */
  float: right;
  /* border: 1px solid #000; */
  right: 0;
}
.el-input-number {
  width: 130px;
}
.good-name {
  font-size: 20px;
  height: 35px;
  line-height: 35px;
}
.detailes {
  line-height: 18px;
  font-size: 12px;
  color: #999;
}
.card {
  margin-bottom: 20px;
  margin-top: 15px;
  padding: 10px;
  background-color: #f9f9f9;
}
.xiangqing span {
  /* color: red; */
  margin-right: 10px;
  width: 48px;
  /* float: left; */
  font-size: 12px;
  font-weight: 400;
  /* vertical-align: bottom; */
}
.prices {
  line-height: 37px;
  margin-bottom: 12px;
  height: 37px;
  overflow: hidden;
}
.prices i {
  font-size: 14px;
  margin-right: 3px;
  color: #c00000;
}
.prices b {
  font-size: 30px;
  color: #c00000;
  font-weight: normal;
}
.server {
  margin-bottom: 12px;
  /* vertical-align: bottom; */
  line-height: 24px;
  font-size: 24px;
}
.server span {
  margin: 0;
}
/* .server::after{
        clear: both;
        display: block;
        height: 0;
        overflow: hidden;
        content: ""
    } */
.server .server_inner1,
.server .server_inner2 {
  float: left;
}
.server .server_inner1 {
  margin-right: 10px;
}
.server i {
  color: #c00000;
}
.server_inner1 {
  font-size: 14px;
}
.server_inner2 {
  font-size: 16px;
}

.server h6 {
  min-height: 24px;
  line-height: 24px;
  font-size: 16px;
  margin: 0;
  font-weight: normal;
}
.style {
  position: relative;
  margin-bottom: 14px;
  padding-left: 10px;
  /* height: 22px;
        height: 22px; */
  /* height: 31px; */
  line-height: 31px;
}
.style span {
  float: left;
  margin: 0;
}
.style ul {
  /* position: absolute;
        top:0;
        left:40px;*/
  width: 485px;
  float: left;
}
.style ul li {
  float: left;
  width: 84px;
  height: 31px;
  line-height: 31px;
  text-align: center;
  color: #333;
  border: 1px solid #d6d6d6;
  margin-left: 10px;
  margin-bottom: 10px;
}
.number {
  padding: 10px;
}
.number span {
  /* width: 48px; */
  display: inline-block;
}
.number .el-input-number {
  margin-right: 20px;
}
.number .kucun {
  width: 25px;
}
.number i {
  font-weight: bold;
}
.cart button,.shoukong{
  border: none;
  background: none;
  min-width: 167px;
  height: 52px;
  line-height: 50px;
  font-size: 20px;
}
.shoukong_warp{
  text-align: center
}
.cart,.shoukong{
  margin-top: 10px;
}
.cart .buy {
  color: #845f3f;
  border: 1px solid #845f3f;
}
.cart .buy:hover {
  background: #845f3f;
  color: #fff;
}
.cart .add:hover {
  /* color: #845f3f; */
  background: #845f3fa2;
}
.cart .add,.shoukong{
  color: #fff;
  background: #845f3f;
  margin-left: 10px;
}
/* .el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hove,.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-activer{
        color:#333 !important;
    } */
.xiangxi img {
  display: block;
  width: 100%;
}
.xiangxi {
  width: 1080px;
  margin: 0 auto;
}
li {
  list-style: none;
}
.toxiang{
    /* height: 40px;
    line-height: 40px; */
padding: 0 0 20px;
}
.toxiang img{
    display: inline-block;
    width: 40px;
    height: 40px;
}
.toxiang span{
   /* display: inline-block; */
   /* line-height: 40px;  */
   margin-left: 20px;
   color: #F18D00;
   font-size: 20px;
   font-weight: bold
}
.comment_warp{
    padding: 20px 20px;
    border-bottom: 1px #eee solid;
    position: relative;
}
.comment_warp p{
    padding-left:60px;
    /* line-height: 30px; */
    font-size: 14px; 
}
.data{
  position: absolute;
  top:48px;
  left: 180px;
  font-size: 12px;
  font-weight: bold
}
.con{
  /* border: 1px dashed #eee; */
  background: #eee;
  line-height: 24px
}
.nocomment{
  width: 100%;
  height: 200px;
}
.nocomment p{
  font-size: 30px;
  text-align: center;
  color: #F18D00;
  font-weight: bold;
  line-height: 200px;
}
</style>
